本文同步分享於個人部落格：Liwen Chiou | Digital Architect & Full-Stack Engineer

📜 這裡的修煉規則：

孩子，在踏上今日的領地前，先坐下來喝杯酒吧。
修煉的路很長，別急著奔跑，先聽聽這份卷軸裡的古老叮嚀。

我在每一站的盡頭都為你鋪設了 「實戰演武場 CodePen」。那不只是程式碼的拼湊，而是你在這場暴風雨中，試圖用邏輯點燃的一顆星火。
成功突圍後，別忘了帶著你的戰利品回到 「QuestBoard 佈告欄」。在那裡，你會發現自己從不孤單，公會的夥伴們都正舉杯等待你的歸來。

記住...

「 導師看重的從來不是你的劍法有多華麗，而是當你被邏輯擊潰、滿身泥濘後，依然選擇握緊理性的劍柄，再次向真相發起衝鋒的勇氣。 」

🛡️ 【公會大廳：導師的修煉導讀】

「一、二、三... 數到這裡，把壞掉的零件丟掉，再把剩下的拿去磨光。」在公會的物資中心，我看到你正拿著一把「舊式鐵鏟 (for 迴圈)」，手動在名單裡挖資料。

這種操作不僅累人，最危險的是容易數錯編號（索引），導致重要資料被漏掉。今天，我要帶你引進公會最新科技：「全自動化生產線 (map/filter)」。你只需要設定好「規則」，剩下的煩瑣細節，陣列會自己幫你完成。記住，真正的強者，是告訴陣列「我要什麼」，而不是教它「怎麼走路」。

💡 【導師講義：底層真相探究】

1. 陣列魔法的三大職位

現代陣列方法的核心思維：「用聲明取代指令。」 所有的職位都不會改動原始陣列，而是專注於產生乾淨的新結果。

🛠️ 陣列三劍客手冊

1. forEach()：熱血傳令兵 (Side Effect)
   傳令兵只負責「跑腿」，對每個人做事，但不帶回結果（回傳 undefined）。適合用於更新 DOM 或印出日誌。

   warriors.forEach((name, i) => console.log(`第 ${i + 1} 位：${name}`));
   

2. filter()：嚴格篩選機 (The Gatekeeper)
   這是公會的「審查員」。只有通過測試（回傳 true）的資料，才能進入下一張名單。

   const survivors = team.filter((m) => m.hp > 0);
   

3. map()：全能加工廠 (The Transformer)
   這是最強大的職位。進去多少人，出來就有多少人。適合用來從複雜物件中「抽取特定資訊」或「重生新樣貌」。

   const expGains = monsters.map((m) => m.exp * 1.5);
   

🏹 導師的辨析圖：生產線職位對照

2. 進階連鎖技：Method Chaining

你可以像堆疊積木一樣，把這些職位串起來：「先篩選，後加工。」

// 任務：找出品質不是 Bad 的武器，並通通打 9 折
const finalSale = shopItems
  .filter((item) => item.quality !== "Bad") // 1. 篩選
  .map((item) => ({
    // 2. 加工
    ...item,
    salePrice: item.price * 0.9,
  }));

3. 邏輯流向圖解

導師的圖解心法： 陣列方法就像是一條 「全自動鍊金生產線」。filter 是生產線上的篩選閘門（擋住廢鐵），map 是生產線上的鍛造爐（將素材加工成兵刃）。你可以讓素材在不同的機器間連鎖流動，最後一次收穫最純淨的成果。

⚔️ 【戰術對抗：學長與學弟的代碼對決】

招式示範：批量更新冒險者狀態

❌ 冒險學弟：手動搬運工人 (for loop)

• 負能量評級：🔴 體力活過多 / 🔴 索引容易出錯

const result = [];
for (let i = 0; i < items.length; i++) {
  if (items[i].active) {
    result.push(items[i].name);
  }
}

✅ 勇者學長：生產線連發 (Filter + Map)

• 利潤評級：🟢 邏輯極簡 / 🟢 充滿維護彈性

const result = items.filter((item) => item.active).map((item) => item.name);

導師講評： 學長的程式碼讀起來就像在讀人類的指令：「過濾活動中的項目，然後取名」。這就是 「聲明式 (Declarative)」 的魅力，你不需要分心去管 i++ 這種瑣事。

🏰 【勇者精英課：邁向職人的進階架構】

終極鍊金術：reduce()

如果你想把一整袋名單的資料 「歸納、縮減」 成一個具體的東西（例如統計總血量），那你需要 reduce()。

const totalAtk = party.reduce((sum, member) => sum + member.atk, 0);

核心心法： 如果你只需要一個「最終結果」（而非一條名單），這就是你的終極武器。它不論是過濾、加工還是計算，都能一招完成。

🛖 【營火叮嚀：為什麼「不可變性」很重要？】

孩子，導師看過太多冒險者因為 i <= length 的細節，導致整個咒語崩潰。

「細節越多，陷阱越多。」 使用 map 或 filter 的核心價值就在於 「不可變性 (Immutability)」：原版資料永遠不動，我們產出的永遠是新的、乾淨的結果。這能保證你的系統不會因為某次意外的修改，而影響到其他正在使用資料的人。

天色微亮，營火雖已燃盡，但你眼中卻閃爍著領悟的光芒。在前往演武場挑戰關卡前，我已經幫你把靈魂碎片精煉成了這份「戰術錦囊」。拿好它，今日的任務不再是負擔，而是你證明自我的舞台。去吧，公會的英雄榜在等著你的戰報。

📝 【夥伴筆記：今日修煉精華】

這份筆記是你的隨身護身符，卡關時看一眼，真相就在裡面。

• map()：長度不變，樣貌改變（轉化）。
• filter()：長度變短，內容不變（篩選）。
• forEach()：單純執行任務，不留任何產出。
• 不可變性：不修改原陣列，永遠回傳新結果。

🎯 【實戰演武場】

• 📜 本日實戰任務：原理篇 —— 陣列大戰：從傳統 for 到自動化生產線 map / filter (CodePen)
• 🛡️ 任務達成證明：QuestBoard 公會報到處

⚔️ 任務鑑定條件：

1. 完成 📜 本日實戰任務：原理篇 —— 陣列大戰：從傳統 for 到自動化生產線 map / filter (CodePen)。
2. 將 CodePen 網址貼至 QuestBoard，並回填鑑定報告：
   • 初心者：自動化解放感 (成就感發掘)：
     • 1. 第一次試著把 filter 跟 map 連在一起寫時，你有沒有感受到一種「邏輯連鎖」的快快感？
   • 冒險者：職位選擇權 (理性挑戰)：[⚡ 觀念辨析]
     • 1. 如果我們只想「清空桌上的垃圾 (刪除 DOM)」而不打算產生新資料，你會建議用 map 還是 forEach？為什麼？
3. 任務完成後，你的名字將永遠標記在公會的英雄榜上！

📚 【圖書館卷軸：延伸學習】

• MDN 官方文獻： Array.prototype.map() — 加工廠
• 實戰導引： reduce() 徹底解析 — 終極鍊金術